import { BidirectionalBar } from '@ant-design/plots';
import { Card, Radio } from 'antd';
import numeral from 'numeral';
import { useMemo, useState } from 'react';
// import { useState } from 'react';
// 属性类型
type PropField = {
  title: string;
  datas: API.DeptJfData[];
  height: number;
};
const DeptYcppFx: React.FC<PropField> = (props) => {
  const [itemType, setItemType] = useState(1);
  const config = useMemo(() => {
    const rows: Record<string, any>[] = [];
    props.datas
      .sort((a, b) => (itemType === 1 ? b.kpi - a.kpi : b.ztZyCurrVal - a.ztZyCurrVal))
      .forEach((item) => {
        rows.push({
          name: item.dpnm.replaceAll('支行', '').replaceAll('小微', '').replaceAll('团队', ''),
          KPI: item.kpi,
          总资源: item.ztZyCurrVal,
        });
      });
    const conf = {
      data: rows,
      xField: 'name',
      yField: ['KPI', '总资源'],
      autoFit: true,
      tooltip: { channel: 'y', valueFormatter: (d: number) => numeral(d).format('0,0') },
      style: {
        fill: (d: Record<string, any>) => {
          if (d.groupKey === 'KPI') return '#64DAAB';
          return '#6395FA';
        },
      },
    };
    return conf;
  }, [props.datas, itemType]);
  return (
    <Card
      size="small"
      title={props.title}
      extra={
        <Radio.Group
          value={itemType}
          size="small"
          onChange={(e) => setItemType(Number(e.target.value))}
        >
          <Radio.Button key={1} value={1}>
            KPI
          </Radio.Button>
          <Radio.Button key={2} value={2}>
            总资源
          </Radio.Button>
        </Radio.Group>
      }
      bodyStyle={{ padding: '0px', height: props.height - 60 }}
    >
      <BidirectionalBar {...config} />
    </Card>
  );
};

export default DeptYcppFx;
